<template>
  <body></body>
</template>

<script lang="ts">
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

// export default {
//   name: 'HelloWorld',
// }

declare global {
  interface Window {
    MyNamespace: any
  }
}

window.MyNamespace = window.MyNamespace || {}

let camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000)
let scene: THREE.Scene = new THREE.Scene()
let renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer({ antialias: true })
let controls: OrbitControls | null = null
let light: THREE.Light = new THREE.DirectionalLight(0xffffff, 4)
let light2: THREE.Light = new THREE.DirectionalLight(0xffffff, 0.5)
let light3: THREE.Light = new THREE.PointLight(0xffffff, 1)
// let light4: THREE.Light = new THREE.AmbientLight(0xffffff)
let mesh: THREE.Mesh
let delta: number = 0
let x: number = 0
let z: number = 0
// let rotateAxis = new THREE.Vector3(1, 1, 1)
init()
animate()

function init() {
  camera.position.z = 400

  light.castShadow = true
  const sphere = new THREE.SphereGeometry(0.5, 16, 8)
  light.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xff0040 })))
  light2.position.set(0, 50, 0)
  light2.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xff0040 })))
  scene.add(light2)
  scene.add(light)

  const geometry = new THREE.BoxGeometry(10, 10, 10)
  const material = new THREE.MeshLambertMaterial({ color: 0xff00ff })
  mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  const mesh2 = new THREE.Mesh(geometry, material)
  scene.add(mesh2)
  mesh.position.set(0, 100, 0)

  const mesh3 = new THREE.Mesh(geometry, material)
  scene.add(mesh3)
  mesh3.position.set(0, 200, 0)
  light3.position.set(0, 150, 0)
  scene.add(light3)
  light3.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xff0040 })))

  // scene.add(light4)

  renderer.setSize(window.innerWidth, window.innerHeight)

  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = THREE.PCFSoftShadowMap

  document.body.appendChild(renderer.domElement)

  controls = new OrbitControls(camera, renderer.domElement)
  controls.listenToKeyEvents(window as any) // optional

  //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)

  controls.enableDamping = true // an animation loop is required when either damping or auto-rotation are enabled
  controls.dampingFactor = 0.05

  controls.screenSpacePanning = false

  controls.minDistance = 100
  controls.maxDistance = 500

  controls.maxPolarAngle = Math.PI

  //

  window.addEventListener('resize', onWindowResize)
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
}

function animate() {
  delta = delta + 0.005
  x = 100 * Math.sin(delta)
  z = 100 * Math.cos(delta)
  light.position.set(x, 0, z)
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
</script>

<style scoped></style>
